<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui列表</title>
    <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" media="all">

</head>
<body style="background-color: #F2F2F2;" >
<div style="padding: 20px; ">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" action="" style="margin-top: 8px">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">申请名称</label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <input type="text" name="applyName" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" value="">
                                </div>
                                <label class="layui-form-label">申请编号</label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <input  type="text" name="applySerial" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" value="">
                                </div>

                                <label class="layui-form-label">单位数</label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <input  type="text" name="count" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" value="">
                                </div>
                                <label class="layui-form-label">钱数</label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <input  type="text" name="money" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" value="">
                                </div>
                                <label class="layui-form-label">申请类型</label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <input  type="text" name="type" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" value="">
                                </div>

                                <div class="layui-input-inline">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" class="layui-btn" id="search">查询</button>
                                    <button type="button" class="layui-btn" id="reset">清空</button>
                                </div>
                            </div>


                        </div>
                    </form>

                    <table class="layui-hide" id="customer" lay-filter="customer"></table>

                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-container">
                        </div>
                    </script>

                    <script type="text/html" id="bar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>

                </div>
            </div>
        </div>
    </div>
</div>




<script src="${ctxPath}/static/layui/layui.js"></script>

<script>
    layui.use(['table','form','jquery','laydate'], function(){
        var table = layui.table;
        var form=layui.form;
        var $=layui.$;
        var layer=layui.layer;
        var laydate=layui.laydate;

        var addLayerIndex='';
        table.render({
            elem: '#customer'
            ,url:'${request.contextPath}/api/getPageList'
            ,method:'post'
            ,contentType: "application/json;charset=UTF-8"
            ,dataType: 'json'
            ,done:function (res,curr,count) {
                // console.log(res)
                // $("tr").css("height",60)
            }
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: [
            ]
            ,title: '申请列表'
            ,cols: [[
                {title: '创建人姓名', field: 'name', visible: true, align: 'center', valign: 'middle'},
                {title: '创建人登录名', field: 'login_name', visible: true, align: 'center', valign: 'middle'},
                {title: '创建日期', field: 'createtime', visible: true, align: 'center', valign: 'middle'},
                {title: '申请名称', field: 'apply_name', visible: true, align: 'center', valign: 'middle'},
                {title: '申请编号', field: 'apply_serial', visible: true, align: 'center', valign: 'middle'},
                {title: '单位数', field: 'count', visible: true, align: 'center', valign: 'middle'},
                {title: '钱数', field: 'money', visible: true, align: 'center', valign: 'middle'},
                {title: '申请类型', field: 'type', visible: true, align: 'center', valign: 'middle'}
            ]]
            ,page: true
            ,parseData: function(res){ //res 即为原始返回的数据
                console.log(res)
                return {
                    "code": res.data.code, //解析接口状态
                    "msg": res.data.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });




        //查询按钮
        $("#search").click(function () {
            var applyName=$("input[name='applyName']").val();
            var applySerial=$("input[name='applySerial']").val();
            var money=$("input[name='money']").val();
            var type=$("input[name='type']").val();
            var count=$("input[name='count']").val();

            //客户列表的重载
            table.reload('customer', {
                    page:{curr:1}
                    ,where: {applyName: applyName,applySerial:applySerial,count:count,money:money,type:type}
                }
            );


        });

        //清空按钮
        $("#reset").click(function () {
            $("input").val("");
        });
        //关闭新增layer
        window.closeAddLayer=function () {
            layer.close(addLayerIndex)
        }
        //重载客户列表
        window.reloadCustomerList=function(){
            table.reload('customer')
        }
    });

</script>

</body>
</html>